<template>
  <ul class="order-tabs">
    <li class="tab"
      v-for="item in tabs"
      :key="item.id"
      :class="{active: currentTab === item.component}"
      @click="handleChildTab(item)"
    >{{ item.name }}</li>
  </ul>
  <template v-if="bangumis.length > 0">
    <album-cover 
      v-for="item in bangumis"
      :key="item.media_id"
      :id="item.season_id"
      :title="item.title"
      :pic="item.cover"
      :type="item.season_type_name"
    ></album-cover>
    <van-divider class="divider">
      <span @click="handleTab('bangumi')">查看更多番剧 <i class="fa fa-dropright"></i></span>
    </van-divider>
  </template>
  <template v-if="movies.length > 0">
    <album-cover 
      v-for="item in bangumis"
      :key="item.media_id"
      :id="item.season_id"
      :title="item.title"
      :pic="item.cover"
      :type="item.season_type_name"
      :area="item.areas"
      :actor="item.cv"
      :director="item.staff"
    ></album-cover>
    <van-divider class="divider">
      <span @click="handleTab('movies')">查看更多影视 <i class="fa fa-dropright"></i></span>
    </van-divider>
  </template>

  <video-cover
    v-for="item in list"
    :key="item.bvid"
    direction="horizontal"
    :danmaku="item.video_review"
    v-bind="item"
  ></video-cover>
</template>

<script>
import VideoCover from '@/components/VideoCover'
import AlbumCover from '@/components/AlbumCover'
import { Divider as VanDivider } from 'vant'
export default {
  name: 'SearchResultDefault',
  emits: ['select-tab', 'select-child-tab'],
  components: {
    VanDivider,
    VideoCover,
    AlbumCover
  },
  props: {
    tabs: {
      type: Array
    },
    currentTab: {
      type: String
    },
    list: {
      type: Array
    },
    bangumis: {
      type: Array
    },
    movies: {
      type: Array
    }    
  },
  setup(props, { emit }) {
    const handleChildTab = item => {
      emit('select-child-tab', item)
    }
    
    const handleTab = component => {
      emit('select-tab', { component })
    }

    return {
      handleTab,
      handleChildTab
    }
  }
}
</script>

<style lang="scss" scoped>
  .order-tabs {
    display: flex;
    height: 44px;
    padding: 0 20px;
    justify-content: space-between;
    background-color: #f9f9f9;
    .tab{
      display: inline-block;
      height: 30px;
      line-height: 30px;
      font-size: 14px;
      margin-top: 7px;
      color: $color-text-primary;
      &.active{
        color: $theme-color;
      }
    }
  }
  .divider{
    margin: 10px 0;
    border-color: #ccc;
  }
</style>